<template>
  <el-table :data="value" border size="small">
    <el-table-column v-for="(item, i) in columns" :label="item?.name || item" :key="i">
      <template slot-scope="scope">
        <template v-if="typeof item === 'object'">
          <component :is="item.type" size="small" v-model="scope.row[item?.name]" style="width: 100%">
            <el-option v-for="o in item.options" :value="o">{{ o }}</el-option>
          </component>
        </template>
        <el-input v-else size="small" v-model="scope.row[item]" />
      </template>
    </el-table-column>
    <el-table-column width="50">
      <div class="table-button" slot-scope="scope">
        <a class="el-icon-plus" @click="addOption(scope)"></a>
        <a class="el-icon-delete" @click="delOption(scope)"></a>
      </div>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ['value', 'columns'],
  methods:{
    delOption({ $index }) {
      const data = this.value
      data.splice($index, 1)
      this.$emit('input', data)
    },
    addOption({ $index }) {
      const data = this.value
      data.splice($index + 1, 0, {})
      this.$emit('input', data)
    },
  }
}
</script>

<style lang="scss" scoped>
.table-button {
  display: flex;
  justify-content: space-between;

  a {
    cursor: pointer;
  }
}
</style>